<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
  </style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
    window.onload = () => {
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        const img = new Image()
        img.crossOrigin = 'anonymous'
        img.src = 'https://mdn.github.io/dom-examples/canvas/pixel-manipulation/assets/rhino.jpg'
        img.onload = ()=>{
            ctx.drawImage(img,0,0)

            // toBlob(callback, type, quality)
            // callback: 回调函数，可获得一个单独的 Blob 对象参数。如果图像未被成功创建，可能会获得 null 值。
            // type : DOMString 类型，指定图片格式，默认格式（未指定或不支持）为 image/png。
            // quality: Number 类型，值在 0 与 1 之间，当请求图片格式为 image/jpeg 或者 image/webp 时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。
            canvas.toBlob((blob)=>{
                const newImg = new Image()
                console.log('blob:',blob)
                const url =  URL.createObjectURL(blob);
                newImg.src = url
                newImg.onload = ()=>{
                    canvas.parentNode.insertBefore(newImg,canvas)
                    URL.revokeObjectURL(url)
                }
            })

        }

    }

</script>
</body>
</html>
